<template>
  <div class="flex flex-col h-full">
    <!-- 计时器和统计 -->
    <div class="mb-4 px-4 flex w-full justify-between">
      <div>
        <span class="text-2xl font-bold font-mono text-primary">{{ typingStore.formatTime }}</span>
      </div>
      <div class="flex space-x-8">
        <div>
          <span class="mr-2 text-muted">WPM:</span>
          <span class="font-mono">{{ typingStore.wpm }}</span>
        </div>
        <div>
          <span class="mr-2 text-muted">{{ t('typing-test.info.accuracy') }}:</span>
          <span class="text-chart-2 font-mono">{{ typingStore.accuracy }}%</span>
        </div>
      </div>
    </div>

    <div class="flex flex-1 flex-col items-center justify-center">
      <!-- 打字测试区域 -->
      <div class="mb-8 max-w-6xl w-full overflow-hidden">
        <!-- 文本展示区 -->
        <div
          class="text-lg text-card-foreground leading-relaxed font-mono p-6 whitespace-pre-wrap overflow-y-auto"
          style="-ms-overflow-style: none; scrollbar-width: none"
        >
          <div class="flex flex-wrap items-center justify-center">
            <!-- 测试完成时显示结果 -->
            <TestResultCard v-if="typingStore.isCompleted" />
            <!-- 未完成时显示打字测试组件 -->
            <template v-else>
              <TgChineseWords
                v-if="
                  typingStore.mode === TypingModeEnum.CHINESE &&
                  typingStore.contentType === TypingContentTypeEnum.WORD
                "
                ref="chineseWordsRef"
              />
              <TgEnglishWords
                v-if="
                  typingStore.mode === TypingModeEnum.ENGLISH &&
                  typingStore.contentType === TypingContentTypeEnum.WORD
                "
                ref="englishWordsRef"
              />
              <TgChineseSentence
                v-if="
                  typingStore.mode === TypingModeEnum.CHINESE &&
                  typingStore.contentType === TypingContentTypeEnum.SENTENCE
                "
                ref="chineseSentencesRef"
              />
              <TgEnglishSentence
                v-if="
                  typingStore.mode === TypingModeEnum.ENGLISH &&
                  typingStore.contentType === TypingContentTypeEnum.SENTENCE
                "
                ref="englishSentencesRef"
              />
            </template>
          </div>
        </div>
      </div>

      <!-- 选项面板 -->
      <div class="flex flex-col gap-4 max-w-6xl w-full items-center">
        <!-- 时间选择 (只在时间模式下显示) -->
        <div class="mb-4 flex items-center space-x-2 md:mb-0">
          <a
            v-for="time in [15, 30, 60, 90]"
            :key="time"
            @click="setTestDuration(time)"
            class="transition-colors hover:text-primary text-muted"
            :class="{ 'text-primary': typingStore.duration === time }"
          >
            {{ time }}s
          </a>
        </div>
        <div class="flex flex-wrap gap-4 items-center justify-between">
          <!-- 语言选择 -->
          <div class="mb-4 md:mb-0">
            <a
              @click="setLanguage(TypingModeEnum.CHINESE)"
              class="mr-3 transition-colors hover:text-primary text-muted"
              :class="{ 'text-primary': typingStore.mode === TypingModeEnum.CHINESE }"
            >
              中文
            </a>
            <a
              @click="setLanguage(TypingModeEnum.ENGLISH)"
              class="transition-colors hover:text-primary text-muted"
              :class="{ 'text-primary': typingStore.mode === TypingModeEnum.ENGLISH }"
            >
              英文
            </a>
          </div>

          <!-- 分割线 -->
          <div class="bg-border h-5 w-[1px]"></div>
          <!-- 内容类型选择 -->
          <div class="mb-4 md:mb-0">
            <a
              @click="setContentType(TypingContentTypeEnum.WORD)"
              class="mr-3 transition-colors hover:text-primary text-muted"
              :class="{
                'text-primary': typingStore.contentType === TypingContentTypeEnum.WORD
              }"
            >
              单词
            </a>
            <a
              @click="setContentType(TypingContentTypeEnum.SENTENCE)"
              class="transition-colors hover:text-primary text-muted"
              :class="{
                'text-primary': typingStore.contentType === TypingContentTypeEnum.SENTENCE
              }"
            >
              句子
            </a>
          </div>
        </div>
      </div>
    </div>

    <!-- 暂停提示遮罩层 -->
    <div
      v-if="typingStore.isPaused"
      class="bg-background/80 flex items-center inset-0 justify-center fixed z-100 dark:bg-dark-background/80"
      ref="pauseOverlayRef"
      tabindex="0"
    >
      <div
        class="p-6 text-center border border-border rounded-xl max-w-md w-full text-primary bg-card"
      >
        <p class="mb-6">
          按<span class="mx-1 px-2 py-0.5 rounded bg-muted">空格</span>重新开始当前文本
        </p>
        <p class="mb-6">
          按<span class="mx-1 px-2 py-0.5 rounded bg-muted">Tab</span>或<span
            class="mx-1 px-2 py-0.5 rounded bg-muted"
            >Enter</span
          >重新生成文本
        </p>
        <p>按任意其他键继续测试</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { TypingContentTypeEnum, TypingModeEnum } from '@renderer/enums/TypingEnum'
  import { useTypingStore } from '@renderer/store/modules/typing.store'
  import useTyping from '@renderer/hooks/useTyping'
  import useShortcuts from '@renderer/hooks/useShortcuts'
  import TgChineseWords from '@renderer/components/common/TgChineseWords.vue'
  import TgEnglishWords from '@renderer/components/common/TgEngilshWords.vue'
  import TgChineseSentence from '@renderer/components/common/TgChineseSentence.vue'
  import TgEnglishSentence from '@renderer/components/common/TgEnglishSentence.vue'
  import TestResultCard from './TestResultCard.vue'
  import { useI18n } from 'vue-i18n'

  const chineseWordsRef = ref(null)
  const chineseSentencesRef = ref(null)
  const englishWordsRef = ref(null)
  const englishSentencesRef = ref(null)
  const typingStore = useTypingStore()
  const { setLanguage, setTestDuration, setContentType } = useTyping()
  const { t } = useI18n()

  onMounted(() => {
    // 初始化句子或单词数据
    if (typingStore.contentType === TypingContentTypeEnum.SENTENCE) {
      // 确保句子模式下有初始化的句子
      typingStore.initSentences()
    } else {
      // 确保单词模式下有初始化的单词
      typingStore.initWords()
    }

    // 监听快捷键
    useShortcuts(chineseWordsRef, chineseSentencesRef, englishWordsRef, englishSentencesRef)
  })
</script>
